const path = require("path");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const CopyWebpackPlugin = require("copy-webpack-plugin"); // 新增：引入插件
const HtmlWebpackExternalsPlugin = require("html-webpack-externals-plugin");

module.exports = (env) => {
  const { WEBPACK_SERVE, WEBPACK_BUILD } = env;
  return {
    entry: "./src/main.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].[contenthash].bundle.js",
      // publicPath: "/abcdefg/",
      clean: true,
      // library: {
      //   type: "commonjs2",
      // },
    },
    mode: WEBPACK_SERVE ? "development" : "production",
    optimization: {
      runtimeChunk: {
        name: "runtime",
      },
      usedExports: true, // 启用标记未使用代码
      minimize: true, // 启用代码压缩
    },
    plugins: [
      // new HtmlWebpackExternalsPlugin({
      //   externals: [
      //     {
      //       module: "vue",
      //       entry: "https://cdn.staticfile.org/vue/2.7.14/vue.js",
      //       global: "Vue",
      //     },
      //   ],
      // }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "public"),
            to: path.resolve(__dirname, "dist"),
            globOptions: {
              ignore: ["**/index.html"], // 排除 HTML 模板（已由 HtmlWebpackPlugin 处理）
            },
          },
        ],
      }),
      new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("development"),
      }),
      new MiniCssExtractPlugin(),
      new HtmlWebpackPlugin({
        title: "boke",
        template: "./public/index.html",
        publicPath: "/",
      }),
      new VueLoaderPlugin(),
    ],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: [
            {
              loader: "vue-loader",
            },
          ],
        },
        {
          test: /\.js$/,
          use: [
            {
              loader: "babel-loader",
            },
          ],
          exclude: /node_modules/,
        },
        {
          test: /\.scss$/,
          use: ["style-loader", "css-loader", "sass-loader"],
        },
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
      ],
    },
    // externals: {
    //   vue: "Vue",
    //   // element: "ELEMENT",
    // },
    devServer: {
      // allowedHosts: 'all',
      hot: true,
      // liveReload: true,
      historyApiFallback: true,
      proxy: [
        {
          context: '/api/v1',  // Required for array format
          target: 'http://localhost:3000',
          changeOrigin: true,
          pathRewrite: { '^/api/v1': '' },
        }
      ],
    },
  };
};
